<template>
  <div class="singer-wrap">
    <div class="left">
      <ul class="singer1">
        <li
          v-for="item in singerTypeList"
          :key="item.classid"
          @click="getSong(item.classid)"
        >
          <a href="#">{{ item.classname }}</a>
        </li>
      </ul>
    </div>
    <div class="right">
      <div class="num" v-for="item in typeList" :key="item.index">
        <a href="#">{{ item.title }}</a>
      </div>
      <p class="text">以下为随机排序，不分先后</p>
      <ul class="singer-list" v-for="item in typeList" :key="item.index">
        <li v-for="list in item.singer" :key="list.singerid" >
          <a href=""><img :src="list.imgurl" alt="" /></a>
          <!-- 这个地方还要在遍历一次 遍历singer -->
          <strong>{{ list.singername }}</strong>
        </li>
      </ul>
      <!-- <ul class="singer-list">
        <li>
          <a href=""><img src="./images/zjl.jpg" alt="" /></a>
          <strong>周杰伦</strong>
        </li>
        <li>
          <a href=""><img src="./images/ljj.jpg" alt="" /></a>
          <strong>林俊杰</strong>
        </li>
        <li>
          <a href=""><img src="./images/gem.jpg" alt="" /></a>
          <strong>G.E.M.邓紫棋</strong>
        </li>
        <li>
          <a href=""><img src="./images/xs.jpg" alt="" /></a>
          <strong>许嵩</strong>
        </li>
        <li>
          <a href=""><img src="./images/xzq.jpg" alt="" /></a>
          <strong>薛之谦</strong>
        </li>
        <li>
          <a href=""><img src="./images/fhcq.jpg" alt="" /></a>
          <strong>凤凰传奇</strong>
        </li>
        <li>
          <a href=""><img src="./images/wf.jpg" alt="" /></a>
          <strong>王菲</strong>
        </li>

        <li>
          <a href=""><img src="./images/ldh.jpg" alt="" /></a>
          <strong>刘德华</strong>
        </li>
        <li>
          <a href=""><img src="./images/zxy.jpg" alt="" /></a>
          <strong>张学友</strong>
        </li>
        <li>
          <a href=""><img src="./images/cyx.jpg" alt="" /></a>
          <strong>陈奕迅</strong>
        </li>
        <li>
          <a href=""><img src="./images/hlam.jpg" alt="" /></a>
          <strong>海来阿木</strong>
        </li>
        <li>
          <a href=""><img src="./images/bdxd.jpg" alt="" /></a>
          <strong>半吨兄弟</strong>
        </li>
        <li>
          <a href=""><img src="./images/mby.jpg" alt="" /></a>
          <strong>毛不易</strong>
        </li>
        <li>
          <a href=""><img src="./images/zj.jpg" alt="" /></a>
          <strong>张杰</strong>
        </li>
        <li>
          <a href=""><img src="./images/dl.jpg" alt="" /></a>
          <strong>刀郎</strong>
        </li>
        <li>
          <a href=""><img src="./images/zs.jpg" alt="" /></a>
          <strong>周深</strong>
        </li>
        <li>
          <a href=""><img src="./images/wj.jpg" alt="" /></a>
          <strong>王杰</strong>
        </li>
        <li>
          <a href=""><img src="./images/500.jpg" alt="" /></a>
          <strong>伍佰</strong>
        </li>
      </ul>
      <div class="list-wrap">
        <ul class="singer-name-list">
          <li class="odd"><a href="" title="汪苏泷">汪苏泷</a></li>
          <li><a href="" title="郑源">郑源</a></li>
          <li class="odd"><a href="" title="BLACKPINK">BLACKPINK</a></li>
          <li><a href="" title="黄家驹">黄家驹</a></li>
        </ul>
        <ul class="singer-name-list">
          <li class="odd"><a href="" title="BEYOND">BEYOND</a></li>
          <li><a href="" title="鹿晗">鹿晗</a></li>
          <li class="odd"><a href="" title="李荣浩">李荣浩</a></li>
          <li><a href="" title="贝乐虎">贝乐虎</a></li>
        </ul>
        <ul class="singer-name-list">
          <li class="odd"><a href="" title="李宗盛">李宗盛</a></li>
          <li><a href="" title="告五人">告五人</a></li>
          <li class="odd"><a href="" title="周传雄">周传雄</a></li>
          <li><a href="" title="张碧晨">张碧晨</a></li>
        </ul>
        <ul class="singer-name-list">
          <li class="odd"><a href="" title="许巍">许巍</a></li>
          <li><a href="" title="任贤齐">任贤齐</a></li>
          <li class="odd"><a href="" title="小阿枫">小阿枫</a></li>
          <li><a href="" title="张信哲">张信哲</a></li>
        </ul>
        <ul class="singer-name-list">
          <li class="odd"><a href="" title="花姐">花姐</a></li>
          <li><a href="" title="张国荣">张国荣</a></li>
          <li class="odd"><a href="" title="老歌经典">老歌经典</a></li>
          <li><a href="" title="谭咏麟">谭咏麟</a></li>
        </ul>
        <ul class="singer-name-list">
          <li class="odd"><a href="" title="张宇">张宇</a></li>
          <li><a href="" title="白小白">白小白</a></li>
          <li class="odd"><a href="" title="庄心妍">庄心妍</a></li>
          <li><a href="" title="宝宝巴士">宝宝巴士</a></li>
        </ul>
        <ul class="singer-name-list">
          <li class="odd"><a href="" title="五月天">五月天</a></li>
          <li><a href="" title="时代少年团">时代少年团</a></li>
          <li class="odd"><a href="" title="刘若英">刘若英</a></li>
          <li><a href="" title="张韶涵">张韶涵</a></li>
        </ul>
        <ul class="singer-name-list">
          <li class="odd"><a href="" title="王力宏">王力宏</a></li>
          <li><a href="" title="王源">王源</a></li>
          <li class="odd"><a href="" title="陈慧娴">陈慧娴</a></li>
          <li><a href="" title="林子祥">林子祥</a></li>
        </ul>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getSingerType, getSongList } from "@/api/index";
export default {
  name: "ZSinger",
  methods: {
    getKuGou() {
      getSingerType().then((res) => {
        this.singerTypeList = res.list;
      });
    },
    getSong(e) {
      let postData = {
        classid: e, // 这个id写活
      };
      getSongList(postData).then((res) => {
        console.log(res);
        this.typeList = res.data.singers.list.info;
        console.log(this.typeList);
      });
    },
  },
  data() {
    return {
      singerTypeList: [],
      typeList: [],
    };
  },
  mounted() {
    this.getKuGou();
    this.getSong();
  },
};
</script>

<style lang="less" scoped>
.singer-wrap {
  width: 1000px;
  margin: 20px auto;
  zoom: 1;
  display: flex;
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sing-wrap::after {
  display: block;
  clear: both;
  content: ".";
  visibility: hidden;
  height: 0;
  font-size: 0;
}
.left {
  width: 210px;
  text-align: left;
  z-index: 10;
  float: left;
}
.left .singer1 li a {
  display: inline-block;
  color: #555;
  height: 30px;
  line-height: 30px;
  width: 142px;
  font-size: 14px;
  padding: 0 0 0 68px;
  text-decoration: none;
}

.left .singer1 li a:hover {
  background-color: #85d2f2;
  color: #fff;
}
.singer1 {
  margin-bottom: 42px;
}
.other {
  margin-top: 25px;
}
.right {
  float: left;
  min-height: 600px;
  padding-top: 0;
  padding-left: 10px;
  margin-left: 9px;
  border-left: 1px solid #e5e5e5;
}
.num {
  color: #303030;
  font-family: Arial;
  float: left;
  height: 24px;
  line-height: 24px;
  font-size: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}
.num a {
  text-decoration: none;
  display: inline-block;
  padding: 0 7px;
  margin-right: 1px;
  color: #333;
  font-size: 15px;
  font-family: "微软雅黑";
}
.num a:hover {
  background-color: #85d2f2;
  color: #fff;
}
.text {
  display: inline-block;
  width: 770px;
  height: 23px;
  line-height: 23px;
  font-size: 12px;
  color: #999;
  text-align: left;
  margin: 5px;
}
.singer-list {
  width: 770px;
  height: 240px;
  margin-bottom: 20px;
}
.singer-list a {
  display: block;
  height: 80px;
  background: url(./images/other.png) no-repeat -82px -152px;
  padding: 3px 3px 4px 4px;
  box-sizing: border-box;
}
.singer-list img {
  width: 68px;
  height: 68px;
}
.singer-list a:hover {
  background-position: -3px -153px;
}
.singer-list li {
  float: left;
  width: 75px;
  height: 103px;
  margin-right: 10px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-sizing: border-box;
}
.singer-list strong {
  width: 70px;
  color: #212121;
  font-size: 14px;
  font-weight: 400;
  display: block;
  padding-left: 2px;
  padding-top: 5px;
  height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}
.list-wrap {
  clear: both;
}
.singer-name-list {
  float: left;
  margin-right: 10px;
  margin-bottom: 20px;
  color: #2a2a2a;
  font-size: 12px;
}
.singer-name-list li {
  width: 180px;
  height: 23px;
  line-height: 25px;
  padding-left: 15px;
  margin: 1px 0;
  text-align: left;
  box-sizing: border-box;
}
.singer-name-list li a {
  text-decoration: none;
  color: #000;
}
.singer-name-list li:hover a {
  text-decoration: underline;
}
.odd {
  background-color: #e7e7e7;
}
.pagination {
  float: left;
}
</style>
